<template>
  <div class="contBox">
    <SearchForm :conditions="conditions" @onShowEdit="onShowEdit" />
    <Rtable
      :columns="columns"
      :url="url"
      :conditions="conditions"
      :size="size"
    />
    <EditUser
      :visible="modalKey === modalKeys.edit"
      @onClose="onHide"
      @onOk="onSubmitEdit"
    />
    <ResetUser :visible="modalKey === modalKeys.reset" @onClose="onHide" />
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import EditUser from './components/EditUser'
import ResetUser from './components/ResetUser'
import SearchForm from './components/SearchForm'
import Rtable from '@/components/r-table'
import url from '@/api/url'

// getUserList

export default {
  components: {
    EditUser,
    ResetUser,
    SearchForm,

    Rtable
  },
  data() {
    return {
      modalKeys: {
        edit: 'edit',
        reset: 'reset'
      },
      url: url.userGetPage
    }
  },
  computed: {
    columns() {
      const columns = [
        {
          label: '用户名',
          prop: 'userName'
        },
        {
          label: '姓名',
          prop: 'realName'
        },
        {
          label: '用户类型',
          prop: 'roleAlias'
        },
        {
          label: '创建时间',
          prop: 'createdDate'
        },
        {
          label: '说明',
          prop: 'remark'
        },
        {
          label: '操作',
          operates: [
            {
              el: 'button',
              text: '编辑',
              opEvent: this.onShowEdit
            },
            {
              el: 'popconfirm',
              text: '删除',
              opEvent: this.delUser,
              props: {
                title: '用户删除后，用户产生的数据不会被清除！'
              }
            },
            {
              el: 'popconfirm',
              text: '重置密码',
              opEvent: this.onResetUser,
              props(row) {
                return {
                  title: `确认重置用户的密码？`
                }
              }
            }
          ]
        }
      ]

      return columns
    },
    ...mapState('userMg', ['size', 'conditions']),
    ...mapGetters(['modalKey', 'modalData'])
  },

  methods: {
    // 删除
    delUser(row) {
      this.$store.dispatch('userMg/onDelUser', row)
    },

    onResetUser(row = {}) {
      this.$store.dispatch('userMg/onResetUser', {
        ...row,
        modalKey: this.modalKeys.reset
      })
    },

    onShowEdit(data = {}) {
      this.$store.dispatch('showModal', {
        modalKey: this.modalKeys.edit,
        modalData: data
      })
    },

    onHide() {
      this.$store.dispatch('hideModal')
    },

    onSubmitEdit(data) {
      this.$store.dispatch('onEditUser', data)
    },

    handleClick(row) {
      this.$store.dispatch('onDelUser', row)
    }
  }
}
</script>
